<template>
  <div class='brand-container'>
    <div class='wrap'>
      <header>
        <div class='left'>
          <img src='../../assets/img/logo.png' class='logo'>
          <img src='../../assets/img/name.png' class='name'>
        </div>
        <div class='center'>
          <div class='day'>
            <h5>安全运行天数</h5>
            <div>4</div>
            <div>4</div>
            <div>4</div>
          </div>
          <div class='line'></div>
          <div class='num'>
            <h5>监控站点个数</h5>
            <div v-for='item in stationInfo.station_count'>{{ item }}</div>
          </div>
        </div>
        <div class='right'>
          <div class='time'><span>{{ date }}</span></div>
          <div class='btn1' @click='fullScreenClick'></div>
          <div class='btn2' @click='$router.back()'></div>
        </div>
      </header>

      <section class='mainbox'>
        <div class='item left'>
          <div class='panel'>
            <h2>站点数据</h2>
            <site :stationInfo='stationInfo' />
          </div>
          <div class='panel'>
            <h2>运维概况</h2>
            <operations :operationInfo='operationInfo' />
          </div>
        </div>
        <div class='item center'>
          <div style='height: 700px'>
            <echartMap :stationInfo='stationInfo.station' v-if='stationInfo' />
          </div>
          <div class='information'>
            <h2>信息概况</h2>
            <div class='wrap'>
              <information />
              <information />
              <information />
            </div>
          </div>
        </div>

        <div class='item right'>
          <div class='panel'>
            <h2>日用电量</h2>
            <electricity v-if='dayElectric' :dayElectric='dayElectric' />
          </div>
          <div class='panel'>
            <h2>碳排放量</h2>
            <carbon v-if='yearCarbon' :yearCarbon='yearCarbon' />
          </div>
          <div class='panel'>
            <h2>水、气用量</h2>
            <water />
          </div>
        </div>
      </section>

      <div class='border-right-top'></div>
      <div class='border-right-bottom'></div>
      <div class='border-left-bottom'></div>
    </div>
    <div class='empty'></div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import carbon from '@/views/bigScreen/component/carbon'
import electricity from '@/views/bigScreen/component/electricity'
import operations from '@/views/bigScreen/component/operations'
import site from '@/views/bigScreen/component/site'
import water from '@/views/bigScreen/component/water'
import information from '@/views/bigScreen/component/information'
import echartMap from '@/views/bigScreen/component/echartMap'
import { getStationInfo, getOperationInfo, getYearCarbon, getDayElectric } from '@/api/bigScreen'

export default {
  name: 'Brand',
  components: {
    carbon,
    electricity,
    operations,
    site,
    water,
    information,
    echartMap,
  },
  data() {
    return {
      //设置当前全屏状态的初始值为 false
      fullScreen: false,
      timer: '',
      // 站点数据
      stationInfo: '',
      //  运维概况
      operationInfo: '',
      // 碳排统计
      yearCarbon: '',
      // 日用电量
      dayElectric: '',
      date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    }
  },
  computed: {},
  created() {
    this.timer = setInterval(() => {
      this.date = dayjs().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
  },
  mounted() {
    let _ = this
    //由于 全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件
    window.addEventListener('resize', function() {
      //增加 timer 定时器的原因是全屏和退出全屏的事件会触发两次窗口大小改变事件，做一次过滤
      if (_.timer) return
      _.timer = setTimeout(() => {
        // 如果是按 "Esc" 键退出全屏，窗口状态已经是非全屏，但是之前记录的状态还是全屏的状态
        if (!_.checkFull() && _.fullScreen) {
          //退出全屏状态。。。
          _.fullScreen = false
          // this.windowExitFullScreen()
        } else {
          //进入全屏状态。。。
        }
        clearTimeout(_.timer)
        _.timer = null
      }, 0)
    })
    this.handleStationInfo()
    this.getOperationInfo()
    this.getYearCarbon()
    this.getDayElectric()
  },
  methods: {
    // 站点数据
    handleStationInfo() {
      getStationInfo().then(res => {
        console.log(res.data, '站点数据')
        this.stationInfo = res.data
        this.stationInfo.station_count = res.data.station_count.toString().split('') || 0
      })
    },

    // 运维概况
    getOperationInfo() {
      getOperationInfo().then(res => {
        console.log(res.data, '运维概况')
        this.operationInfo = res.data
      })
    },

    // 碳排统计
    getYearCarbon() {
      getYearCarbon().then(res => {
        console.log(res.data, '碳排统计')
        this.yearCarbon = res.data
      })
    },

    // 日用电量
    getDayElectric() {
      getDayElectric().then(res => {
        console.log(res.data, '日用电量')
        this.dayElectric = res.data
      })
    },

    //全屏按钮\退出全屏按钮点击事件
    fullScreenClick() {
      this.fullScreen = !this.fullScreen
      if (this.fullScreen) {//当前要启动全屏
        this.setWindowFullScreen()
      } else {//当前要退出全屏
        this.windowExitFullScreen()
      }
    },
    //启动全屏
    setWindowFullScreen() {
      let docElm = document.documentElement
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
    },
    //退出全屏
    windowExitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
    checkFull() {
      //火狐浏览器
      let isFull = document.mozFullScreen ||
        document.fullScreen ||
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) isFull = false
      return isFull
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style lang='scss' scoped>
.brand-container {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background: #000835;

  .empty {
    width: 100%;
    //height: 50px;
    height: 3.125rem;
  }

  .wrap {
    width: 100%;
    min-height: 100%;
    background: #000835;

    .border-left-bottom {
      position: absolute;
      width: 138px;
      height: 26px;
      background: url("../../assets/img/border_left_bottom.png");
      background-size: 100% 100%;
      left: 32px;
      bottom: 25px;
    }

    .border-right-top {
      position: absolute;
      width: 25px;
      height: 139px;
      background: url("../../assets/img/border_right_top.png");
      background-size: 100% 100%;
      top: 29px;
      right: 23px;
    }

    .border-right-bottom {
      position: absolute;
      width: 52px;
      height: 81px;
      background: url("../../assets/img/border_right_bottom.png");
      background-size: 100% 100%;
      right: 24px;
      bottom: 24px;

    }

    header {
      width: 100%;
      position: relative;
      height: 100px;
      box-sizing: border-box;
      padding-right: 53px;
      display: flex;
      justify-content: space-between;

      .left {
        width: 399px;
        height: 95px;
        background: url("../../assets/img/head_bg1.png");
        background-size: 100% 100%;
        display: flex;

        .logo {
          width: 41px;
          height: 39px;
          margin-top: 20px;
          margin-left: 30px;
        }

        .name {
          width: 218px;
          height: 28px;
          margin-left: 14px;
          margin-top: 27px;
        }
      }

      .center {
        width: 825px;
        height: 100px;
        background: url("../../assets/img/head_bg2.png");
        background-size: 100% 100%;
        margin-top: 40px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 102px;

        .day, .num {
          min-width: 270px;
          height: 55px;
          margin-top: 12px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;

          h5 {
            width: 109px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            margin: 17px 10px 0 0;
          }

          div {
            width: 52px;
            height: 52px;
            background: url("../../assets/img/head_bg6.png");
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
            font-family: Avanti;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 52px;
          }
        }

        .line {
          width: 1px;
          height: 39px;
          background: #28B3FF;
          opacity: 0.35;
          margin-top: 18px;
        }

      }

      .right {
        width: 370px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 16px;

        .time {
          width: 230px;
          height: 50px;
          //background: url("../../assets/img/head_bg3.png") top right no-repeat;
          text-align: left;
          margin-top: 5px;

          span {
            display: inline-block;
            margin-top: 8px;
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #49A7E9;
          }
        }

        .btn1 {
          width: 44px;
          height: 43px;
          background: url("../../assets/img/head_bg4.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        .btn2 {
          width: 150px;
          height: 43px;
          background: url("../../assets/img/head_bg5.png");
          background-size: 100% 100%;
          margin-top: 1px;
          cursor: pointer;
        }
      }

    }

    .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;

      .item {
        &.left {
          margin-left: 53px;

          .panel:nth-child(1) {
            height: 383px;
            background: url("../../assets/img/zdsj.png");
            background-size: 100% 100%;
            margin-bottom: 5px;
          }

          .panel:nth-child(2) {
            height: 517px;
            background: url("../../assets/img/ywgk.png");
            background-size: 100% 100%;

          }
        }

        &.center {
          flex: 1;
          margin: 0 0.125rem 0.1rem;
          overflow: hidden;

          .information {
            height: 217px;
            background: url('../../assets/img/xxgk.png');
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 1px 80px 0;

            .wrap {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
            }

            h2 {
              width: 100%;
              text-align: center;
              margin: 7px 0 0 0;
              font-size: 20px;
              font-family: Microsoft YaHei;
              //font-weight: 400;
              color: #FFFFFF;
            }

          }
        }

        &.right {
          margin-right: 53px;

          .panel:nth-child(1), .panel:nth-child(2) {
            height: 333px;
            background: url("../../assets/img/rydl.png");
            margin-bottom: 5px;
            background-size: 100% 100%;
          }

          .panel:nth-child(3) {
            height: 240px;
            background: url("../../assets/img/sqyl.png");
            background-size: 100% 100%;
            margin-top: 15px;
          }
        }


        .panel {
          position: relative;
          width: 413px;
          min-height: 240px;
          padding: 1px 0.1875rem 0;

          h2 {
            text-align: left;
            font-size: 18px;
            font-family: Microsoft YaHei;
            //font-weight: 400;
            color: #FFFFFF;
            margin-top: 8px;
            margin-left: 21px;
          }

          .chart {
            height: 3rem;
          }
        }
      }

    }

  }

}

</style>
